{% extends "base.html" %}
{% block title %}用户列表 - YOUER的系统{% endblock %}
{% block content %}
<!-- 添加备份按钮 -->
<form method="post" action="{{ url_for('backup') }}" class="mb-4">
    <button type="submit" class="btn btn-primary">备份</button>
</form>
<div class="card">
    <div class="card-header">
        <h3>用户列表</h3>
    </div>
    <div class="card-body">
        {% if not users_list %}
            <div class="alert alert-info" role="alert">
                暂无用户信息。
            </div>
        {% else %}
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">用户ID</th>
                        <th scope="col">用户名</th>
                        <th scope="col">邮箱</th>
                        <th scope="col">单位</th>
                        <th scope="col">操作</th> <!-- 添加操作列标题 -->
                    </tr>
                </thead>
                <tbody>
                    {% for user in users_list %}
                    <tr>
                        <td>{{ user.UserID }}</td>
                        <td>{{ user.Username }}</td>
                        <td>{{ user.Email }}</td>
                        <td>{{ user.Unit }}</td>
                        <td>
                            <form method="post" action="{{ url_for('user_delete', id=user.UserID) }}" onsubmit="return confirm('确定要删除该用户吗？')">
                                <!-- 添加onsubmit事件进行确认提示，返回false则阻止表单提交 -->
                                <button type="submit" class="btn btn-danger btn-sm">删除</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</div>
<!-- 添加新建用户表单 -->
<form id="newUserForm" method="post" action="{{ url_for('user_create') }}" class="mt-4 mb-2">
    <div class="form-group">
        <label for="newUsername">用户名</label>
        <input type="text" class="form-control" id="newUsername" name="newUsername" placeholder="请输入用户名" required>
    </div>
    <div class="form-group">
        <label for="newEmail">邮箱</label>
        <input type="email" class="form-control" id="newEmail" name="newEmail" placeholder="请输入邮箱" required>
    </div>
    <button type="submit" class="btn btn-success">新建用户</button>
</form>
<style>
    /* 表单元素样式 */
  .form-group {
        margin-bottom: 15px;
    }

  .form-control {
        border: 1px solid #ced4da;
        border-radius: 5px; /* 圆角边框 */
        padding: 10px;
        width: 100%;
        transition: border-color 0.2s ease; /* 添加边框颜色过渡效果 */
    }

  .form-control:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 蓝色聚焦阴影 */
    }

    /* 按钮样式 */
    button {
        width: 100px; /* 设置按钮宽度 */
        margin-left: 10px; /* 增加按钮间距 */
    }
</style>
{% endblock %}